<template>
	<view class="app-container">
		<!-- 主体内容区 -->
		<view class="content-wrapper">
			<!-- 左侧分类导航 -->
			<scroll-view class="sidebar" scroll-y>
				<view 
					v-for="(category, index) in app_list" 
					:key="index"
					class="sidebar-item"
					:class="{ active: currentCategoryIndex === index }"
					@click="switchCategory(index)"
				>
					<view class="sidebar-text">{{ category.menuName }}</view>
				</view>
			</scroll-view>
			
			<!-- 右侧应用列表 -->
			<scroll-view class="app-content" scroll-y>
				<!-- 常用应用区域 -->
				<view class="section-wrapper">
					<view class="section-title">
						<text class="title-text">常用应用</text>
						<text class="title-desc">长按拖动可调整顺序</text>
					</view>
					
					<view class="app-grid">
						<view 
							class="app-item common-app"
							v-for="app in filteredCommonApps" 
							:key="app.url"
							@click="chooseMenu(app)" 
						>
							<view class="app-icon-wrapper" :style="{ backgroundColor: app.color }">
								<text :class="[app.icon]" class="custom-icon"></text>
							</view>
							<view class="app-name">{{ app.label }}</view>
							<view class="app-action">
								<u-icon name="minus-circle-fill" color="#fa3534" size="24"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 分类应用区域 -->
				<view class="section-wrapper" v-if="app_list.length > 0">
					<view class="section-title">
						<text class="title-text">{{ app_list[currentCategoryIndex].menuName }}</text>
					</view>
					
					<view class="app-grid">
						<view 
							class="app-item"
							v-for="app in filteredCategoryApps" 
							:key="app.url"
							@click="chooseMenu(app)" 
						>
							<view 
								class="app-icon-wrapper" 
								:style="{ 
									backgroundColor: app.color, 
									opacity: now_list.find(menu => menu.url === app.url) ? '0.6' : '1' 
								}"
							>
								<text :class="[app.icon]" class="custom-icon"></text>
							</view>
							<view class="app-name">{{ app.label }}</view>
							<view class="app-action">
								<u-icon 
									v-if="!!now_list.find(menu => menu.url === app.url)" 
									name="checkmark-circle-fill" 
									color="#B8C0C8" 
									size="24"
								></u-icon>
								<u-icon v-else name="plus-circle-fill" color="#FB5904" size="24"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部确认按钮 -->
		<view class="confirm-btn" @click="updateCommonApp">完成</view>
	</view>
</template>

<script>
import { menus } from './app.js';
export default {
	data() {
		return {
			currentCategoryIndex: 0,
			now_list: [
				{
					url: '/pages/order/OrderAdd',
					label: '开单',
					icon: 'custom-icon-piliangxiadan',
					color: '#f29611',
					access: 'OrderAdd'
				},
				{
					url: '/pagesT/stock/SalesOrder',
					label: '出库单',
					icon: 'custom-icon-quehuoshangpinshu',
					color: '#5c6aff',
					access: 'InventoryOut'
				},
				{
					url: '/pagesT/customer/StaffList',
					label: '销售排行',
					icon: 'custom-icon-paihangbang',
					color: '#f29611',
					access: 'salesRanking'
				},
				{
					url: '/pagesT/customer/CommunicationLogs',
					label: '客户拜访',
					icon: 'custom-icon-fuwu',
					color: '#f29611',
					access: 'CustomerListvisitedLogs'
				}
			],
			app_list: []
		};
	},
	computed: {
		userCenterId() {
			return this.$store.state.userInfo.userCenterId;
		},
		enterpriseScope() {
			return this.$store.state.enterprise.scope;
		},
		filteredCommonApps() {
			return this.now_list.filter(app => this.$accessCheck(this.$Access[app.access]));
		},
		filteredCategoryApps() {
			if (!this.app_list.length || !this.app_list[this.currentCategoryIndex]) {
				return [];
			}
			return this.app_list[this.currentCategoryIndex].menuList.filter(
				app => this.$accessCheck(this.$Access[app.access])
			);
		}
	},
	onLoad() {
		if (parseInt(this.$store.state.enterprise.scope) === 4) {
			this.app_list = menus.map(item => {
				return{
					...item,
					menuList:item.menuList.filter(menu=>menu.label !== '商品资料')
				}
			});
		} else {
			this.app_list = menus;
		}
	},
	onShow() {
		this.getCommonAppInfo();
	},
	methods: {
		switchCategory(index) {
			this.currentCategoryIndex = index;
		},
		chooseMenu(app) {
			const index = this.now_list.findIndex(menu => menu.url === app.url);
			if (index > -1) {
				if (this.now_list.length === 1) {
					this.$u.toast('最少保留一个应用');
					return;
				}
				this.now_list.splice(index, 1);
			} else {
				this.now_list.push(app);
			}
		},
		getCommonAppInfo() {
			this.$u.api.getCommonAppInfo(this.userCenterId).then(res => {
				if (res.data.jsonKey) {
					if(res.data.jsonKey[0].icon.indexOf('ibon')>-1){
						return
					}
					this.now_list = res.data.jsonKey;
				}
			});
		},
		updateCommonApp() {
			this.$u.api
				.updateCommonApp(this.userCenterId, {
					jsonKey: this.now_list
				})
				.then(res => {
					uni.navigateBack();
				});
		}
	}
};
</script>

<style scoped lang="scss">
.app-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.header {
	height: 90rpx;
	background-color: #FB5904;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
	.title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 500;
	}
}

.content-wrapper {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.sidebar {
	width: 180rpx;
	background-color: #f0f0f0;
	height: 100%;
	
	.sidebar-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		
		&.active {
			background-color: #ffffff;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 30rpx;
				height: 40rpx;
				width: 6rpx;
				background-color: #FB5904;
				border-radius: 0 4rpx 4rpx 0;
			}
			
			.sidebar-text {
				color: #FB5904;
				font-weight: 500;
			}
		}
		
		.sidebar-text {
			font-size: 26rpx;
			color: #666666;
			text-align: center;
			padding: 0 10rpx;
		}
	}
}

.app-content {
	flex: 1;
	background-color: #ffffff;
	height: 100%;
}

.section-wrapper {
	padding: 20rpx;
	
	.section-title {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.title-text {
			font-size: 30rpx;
			color: #333333;
			font-weight: 500;
		}
		
		.title-desc {
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.app-grid {
	display: flex;
	flex-wrap: wrap;
	
	.app-item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
		
		&.common-app {
			.app-icon-wrapper {
				border: 2rpx solid rgba(251, 89, 4, 0.2);
			}
		}
		
		.app-icon-wrapper {
			width: 90rpx;
			height: 90rpx;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 12rpx;
			
			.custom-icon {
				font-size: 48rpx;
				color: #ffffff;
			}
		}
		
		.app-name {
			font-size: 24rpx;
			color: #333333;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
		}
		
		.app-action {
			position: absolute;
			top: -10rpx;
			right: 30rpx;
		}
	}
}

.confirm-btn {
	height: 90rpx;
	background-color: #FB5904;
	color: #ffffff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
